<html>

<head>
    <title>grapecity_spreadJS_demo</title>
    <script src="jquery_3.1.1.min.js" type="text/javascript"></script>
    <link rel="stylesheet" href="gc.spread.sheets.excel2013white.14.2.2.css" type="text/css">
    <script src="gc.spread.sheets.all.14.2.2.min.js" type="text/javascript"></script>
    <script src="gc.spread.excelio.14.2.2.min.js" type="text/javascript"></script>
    <script src="https://cdn.grapecity.com.cn/spreadjs/scripts/FileSaver.min.js" type="text/javascript"></script>
    <script src="gc.spread.sheets.resources.zh.14.2.2.min.js" type="text/javascript"></script>
    <script src="gc.spread.sheets.print.14.2.2.min.js" type="text/javascript"></script>
    <script src="gc.spread.sheets.pdf.14.2.2.min.js" type="text/javascript"></script>
    <script src="gc.spread.sheets.charts.14.2.2.min.js" type="text/javascript"></script>
    <script src="v14.js" type="text/javascript"></script>
    <style type="text/css">
        p{
            color: #336699;
            text-align: center;
        }
        
        #ss{
            width: 100%;
            height: 450px;
        }
    </style>
</head>

<body>
    <p>单元格对角线添加斜线</p>
    <div id="ss"></div>
    <script type="text/javascript">
        //Title: 斜线单元格
        //Description：设置斜线单元格
        //Tag：斜线，单元格
        
        
        window.onload = function() {
            var spread = new GC.Spread.Sheets.Workbook(document.getElementById("ss"));
        
        
            var activeSheet = spread.getActiveSheet();
        
            activeSheet.setRowHeight(0, 80)
            activeSheet.setColumnWidth(0, 200)
            var myCellType = new MyCellType();
            activeSheet.getCell(0, 0).cellType(myCellType).value("Hello Wordl1, Hello World2")
        
        };
        
        function MyCellType() {}
        MyCellType.prototype = new GC.Spread.Sheets.CellTypes.Text();
        MyCellType.prototype.paint = function(ctx, value, x, y, w, h, style, options) {
            //Paints a cell on the canvas.
        
            if (!ctx) {
                return;
            }
            ctx.save();
            ctx.beginPath();
            ctx.moveTo(x, y);
            ctx.lineTo(x + w, y + h);
            ctx.stroke();
            ctx.font = style.font;
        
            var text = value ? value.split(",") : ["", ""];
            ctx.fillText(text[0].trim(), x + w * 7 / 8, y + h / 3);
            ctx.fillText(text[1].trim(), x + w / 2, y + h * 3 / 4);
        
            ctx.restore();
        };
    </script>
</body>

</html>